<script setup>
	import Question from '@/views/biz/examPaper/question.vue'

	const selectionConfigLocal = ref([
		{
			id: 1,
			score: 1,
			questionType: 'simple',
			questionTitle: '样本试题（请自行删除）',
			difficulty: '1'
		}
	])
	const columns = [
		{
			title: 'ID',
			dataIndex: 'id',
			key: 'id'
		},
		{
			title: '标题',
			dataIndex: 'questionTitle',
			key: 'questionTitle'
		},
		{
			title: '题型',
			dataIndex: 'questionType',
			key: 'questionType'
		},
		{
			title: '难度',
			dataIndex: 'difficulty',
			key: 'difficulty'
		},
		{
			title: '分数',
			dataIndex: 'score',
			key: 'score'
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 150
		}
	]

	const questionSelectVisible = ref(false)
	const handleUpdateSelectedRowsList = (dataList) => {
		const idList = selectionConfigLocal.value.map((item) => item.id)
		dataList.forEach((item) => {
			if (!idList.includes(item.id)) {
				const itemData = {
					id: item.id,
					questionTitle: item.questionTitle,
					questionType: item.questionType,
					difficulty: item.difficulty,
					score: 1
				}
				selectionConfigLocal.value.push(itemData)
			}
		})
		questionSelectVisible.value = false
	}
	const handleDelSelectionConfig = (index) => {
		selectionConfigLocal.value.splice(index, 1)
	}
	const scoreAndNumber = computed(() => {
		let judgeScore = 0
		let oneScore = 0
		let multiScore = 0
		let fillScore = 0
		let simpleScore = 0
		let judgeNumber = 0
		let oneNumber = 0
		let multiNumber = 0
		let fillNumber = 0
		let simpleNumber = 0
		selectionConfigLocal.value.forEach((item) => {
			switch (item.questionType) {
				case 'judge':
					judgeNumber++
					judgeScore += item.score
					break
				case 'one':
					oneNumber++
					oneScore += item.score
					break
				case 'multi':
					multiNumber++
					multiScore += item.score
					break
				case 'fill':
					fillNumber++
					fillScore += item.score
					break
				case 'simple':
					simpleNumber++
					simpleScore += item.score
					break
			}
		})
		let score = judgeScore + oneScore + multiScore + fillScore + simpleScore
		let number = judgeNumber + oneNumber + multiNumber + fillNumber + simpleNumber
		return {
			judgeScore,
			oneScore,
			multiScore,
			fillScore,
			simpleScore,
			judgeNumber,
			oneNumber,
			multiNumber,
			fillNumber,
			simpleNumber,
			score,
			number
		}
	})

	const emit = defineEmits(['updateSelectionConfig', 'updateQuestionCount', 'updateTotalScore'])
	const props = defineProps({
		selectionConfig: {
			type: String,
			required: true
		}
	})

	// 模拟 created 生命周期
	onBeforeMount(() => {
		try {
			const data = JSON.parse(props.selectionConfig)
			if (data && Array.isArray(data)) {
				selectionConfigLocal.value = data
			}
		} catch (e) {
			/* empty */
		}
	})
	watch(
		selectionConfigLocal,
		(newValue) => {
			emit('updateSelectionConfig', JSON.stringify(newValue))
			emit('updateTotalScore', scoreAndNumber.value.score) //总分
			emit('updateQuestionCount', scoreAndNumber.value.number) //总数
		},
		{ deep: true }
	)
</script>

<template>
	<a-card>
		<a-button type="primary" @click="questionSelectVisible = true">固定选题配置</a-button>
		<a-row :gutter="[16, 24]">
			<a-col :span="6">
				<div>总题数/分数</div>
				<div>{{ scoreAndNumber.number }}/{{ scoreAndNumber.score }}</div>
			</a-col>
			<a-col :span="6">
				<div>判断题数/分数</div>
				<div>{{ scoreAndNumber.judgeNumber }}/{{ scoreAndNumber.judgeScore }}</div>
			</a-col>
			<a-col :span="6">
				<div>单选题数/分数</div>
				<div>{{ scoreAndNumber.oneNumber }}/{{ scoreAndNumber.oneScore }}</div>
			</a-col>
			<a-col :span="6">
				<div>多选题数/分数</div>
				<div>{{ scoreAndNumber.multiNumber }}/{{ scoreAndNumber.multiScore }}</div>
			</a-col>
			<a-col :span="6">
				<div>填空题数/分数</div>
				<div>{{ scoreAndNumber.fillNumber }}/{{ scoreAndNumber.fillScore }}</div>
			</a-col>
			<a-col :span="6">
				<div>简答题数/分数</div>
				<div>{{ scoreAndNumber.simpleNumber }}/{{ scoreAndNumber.simpleScore }}</div>
			</a-col>
		</a-row>
		<div>
			<a-table :dataSource="selectionConfigLocal" :columns="columns" :pagination="false">
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.dataIndex === 'questionTitle'">
						<div v-html="record.questionTitle"></div>
					</template>
					<template v-if="column.dataIndex === 'questionType'">
						{{ $TOOL.dictTypeData('question_type', record.questionType) }}
					</template>
					<template v-if="column.dataIndex === 'difficulty'">
						{{ $TOOL.dictTypeData('question_difficulty', record.difficulty) }}
					</template>
					<template v-if="column.dataIndex === 'score'">
						<a-input-number v-model:value="record.score" :min="0" />
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a-button type="link" danger size="small" @click="handleDelSelectionConfig(index)">删除</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</a-card>
	<a-modal v-model:visible="questionSelectVisible" title="固定选题" width="90%" :footer="null">
		<Question @updateSelectedRowsList="handleUpdateSelectedRowsList" />
	</a-modal>
</template>

<style scoped lang="less"></style>
